<template>
  <div class="bbx-blur-modal">
    <div class="bbx-blur-box">
      <div class="blur-header">
        <span class="font-28 flex-1">{{ $t('system.forGuide.text1') }}</span>
        <div class="blur-close-box just-cur-point" @click="close">
          <i class="iconfont icon-close"></i>
          {{ $t('common.base.close') }}
        </div>
      </div>
      <div class="blur-content">
        <div class="blur-content-change-box">
          <div class="blur-content-change-item" :class="nowType === 0 ? 'is-active' : ''" @click="changeNowType(0)">{{ $t('system.forGuide.text3') }}</div>
          <div class="blur-content-change-item" :class="nowType === 1 ? 'is-active' : ''" @click="changeNowType(1)">{{ $t('system.forGuide.text4') }}</div>
        </div>
        <div class="blur-video-box" v-if="nowType === 0">
          <video autoplay muted loop :src="video1">
          </video>
        </div>
        <div class="blur-video-box" v-if="nowType === 1">
          <video autoplay muted loop :src="video2">
          </video>
        </div>

        <div>
          {{ $t('system.forGuide.text2') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { getLocalesCommonOssUrl } from '@src/util/assets';
const video1 = getLocalesCommonOssUrl('/guide/formCell/formCell.mp4');
const video2 = getLocalesCommonOssUrl('/guide/formCell/viewCell.mp4');
export default defineComponent({
  name: 'NewBlurGuideCom',
  setup(props, { emit }) {
    const nowType = ref(0);
    function close() {
      emit('close');
    }
    function changeNowType(key) {
      nowType.value = key;
    }
    return {
      nowType,
      video1,
      video2,
      close,
      changeNowType,
    };
  },
});
</script>
<style lang="scss" scoped>
@import '@src/component/compomentV2/newBlurGuide/index.scss';
</style>
